<template>

  <div class="listContentBox ">
    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="5" :queryData="queryData" @getQuery="getList" />
    <div class="listBox p-px-l-24 p-px-r-24 p-px-t-16">
      <el-row class="listBoxbtn m-px-b-16">
        <el-col :span="24">
          <el-button type="primary" @click="handleDialog('add','新增栏目','')">新增</el-button>
        </el-col>
      </el-row>
      <div class="listBoxTable">
        <el-table ref="list" v-loading="listLoading" :data="list" height="100%" border default-expand-all row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="栏目名称" show-overflow-tooltip />
          <el-table-column prop="sort" label="排序" />
          <el-table-column label="操作" align="center" fixed="right" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDialog('addColumn','新增栏目',scope.row)">新增栏目</el-button>
              <el-button type="text" @click="handleDialog('edit','编辑栏目',scope.row)">修改</el-button>
              <el-button type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <!-- 列表缺省 -->
          <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
            <el-empty :image-size="70" description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
    </div>
    <dialogForm ref="dialogForm" />
  </div>
</template>

<script>
// Api
import { methodGetApi } from "@/api/publicApi";
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink.vue'
import dialogForm from "./dialogForm";
// -------------------------------------------------------------
export default {
  name: 'List',
  mixins: [listMixins],
  components: { dialogForm, advancedQueryShrinkComponent },
  provide() {
    return {
      listQueryParams: this
    }
  },
  data() {
    return {
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: [
          {
            label: '栏目名称', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'name' // 查询入参Key
          }
        ]
      }
    }
  },
  created() {},

  mounted() {},
  methods: {
    /**
     * @description: 列表
     * @Author: 张佳敏
     * @param {*} queryParams
     * @return {*}
     */
    getList(queryParams) {
      delete queryParams.pageNum
      delete queryParams.pageSize
      this.getListMixins('/ent-news-type/getAll', queryParams, false, true, 'id')
    },

    /**
     * @Description: 置顶/取消置顶
     * @author zhangjiamin
     * @param {*} row
     * @return {*}
     */
    handleTop(row) {
      const params = {
        id: row.id,
        top: row.top
      }
      methodGetApi('/ent-news-type/topById', params).then(res => {
        this.msgAlt(res.msg, 'success')
        this.getList()
      })
    },

    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type 弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typName 弹窗title '新增'，修改，'详情'
     * @param {*} row 参row
     * @return {*}
     */
    handleDialog(type, typName, row) {
      console.log(row)
      this.$refs['dialogForm'].dialogResetForm()
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typName
      if (type !== 'add') {
        this.$refs['dialogForm'].dialogFormExtra.columnId = row.id
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    },

    /**
     * @description: 删除
     * @Author: baoxuhui
     * @param {*} row
     * @return {*}
     */
    handleDelete(row) {
      this.handleDeleteMixins('/ent-news-type/removeById', { id: row.id })
    }
  }
}
</script>

